<template>
  <div class="wrap">
    <myHead title="在线简历"></myHead>
    <div class="rm-name">
      <div class="rm-name-l" @click="jump('lifeInformation')">
        <div><p>{{userInfo ? userInfo.name:$store.state.userInfo.nickname}}</p><img src="../../../static/img/zxjlbianji.png" alt=""></div>
        <p>{{userInfo ? userInfo.age+"岁":'秘密哦'}}·{{userInfo ? userInfo.degree:'秘密哦'}}</p>
      </div>
      <img :src="userInfo ? $store.state.imgurlApi+userInfo.image:$store.state.userInfo.avatar" alt="">
    </div>
    <div class="rm-grys">
        <div class="rm-tit" @click="show=true">
            <p>个人优势</p>
            <img src="../../../static/img/zxjlbianji.png" alt="">
        </div>
        <div class="rm-content">{{strength_content}}</div>
    </div>
    <div class="rm-qzqw" >
      <div class="rm-tit" @click="jump('jobExpectation')">
        <p>求职期望</p>
        <img src="../../../static/img/zxjlbianji.png" alt="">
      </div>
      <div class="rm-qzqw-bot" v-if="expect">
        <div>
          <p>{{expect.position}}    {{expect.pay}}/天</p><p>{{expect.nature}}</p>
        </div>
        <img src="../../../static/img/youjiantou003.png" alt="">
      </div>
    </div>
    <div class="rm-qzqw">
      <div class="rm-tit" >
        <p>工作经历</p>
        <img src="../../../static/img/zxjlbianji.png" alt="" @click="exp('0')">
      </div>
      <div class="rm-contentBox">
        <div v-if="occupational_history && occupational_history.length>0">
          <div v-for="(item,index) in occupational_history" key="index">
            <div class="rm-qzqw-bot rm-qzqw-bot2" @click="exp(item.id)">
              <p>{{item.undergo}}</p>
              <div>
                <p>{{item.entrytime}}-{{item.departuretime}}</p><img src="../../../static/img/youjiantou003.png" alt="">
              </div>
            </div>
            <div class="rm-gzjl">
              <p>{{item.position}}</p>
              <p>{{item.content}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-dialog v-model="show" title="个人优势" confirmButtonColor="#FB4448" cancelButtonColor="#333333" show-cancel-button @confirm="submit">
      <input class="dialog" type="text" :placeholder="strength_content" v-model="strength_content" />
    </van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "OnlineResume",
    components: {
      myHead
    },
    data(){
      return {
        show:false,
        occupational_history:[], //工作经历
        expect:false, //求职期望,
        strength_content:"有什么个人优势呢？用一两句话表述吧~", //个人优势
        userInfo:false,
      }
    },
    created() {
      this.$myAxios('index/Resume/index', 'post', {
        user_id:this.$myStorage.query()
      }).then(res => {
        console.log(res);
        if(res.data.state == 1){
          this.occupational_history = res.data.occupational_history;
          this.expect = res.data.expect;
          this.userInfo = res.data.personal;
          if(res.data.strength){
            this.strength_content = res.data.strength.content
          }
        }else{
          this.$myNotice("网络连接中断...",2000)
        }
      });
    },
    methods:{
      jump(page){
        this.$router.push({
          name:page
        })
      },
      exp(id){
        this.$router.push({
          name:"setWorkExperience",
          query:{id:id}
        })
      },
      submit(){
        this.$myAxios('index/Resume/strength_update', 'post', {
          user_id:this.$myStorage.query(),
          content:this.strength_content,
        }).then(res => {
          console.log(res);
          if(res.data.state == 1){
            this.$myNotice("编辑成功",2000);
            this.show = false;
          }else{
            this.$myNotice("网络连接中断...",2000);
          }
        });
      },
      setMsg(page,title,rightText,maxLength,rows,data){
        this.$router.push({
          name:page,
          query:{
            title,
            rightText,
            maxLength,
            rows,
            data
          }
        })
      },
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    box-sizing: border-box;
    min-height: 6.67rem;
    padding: .5rem .15rem 0;
  }

  .rm-name {
    width: 100%;
    height: 1rem;
    box-sizing: border-box;
    border-bottom: .01rem solid #EEEEEE;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }
  .rm-name>img {
    width: .88rem;
    height: .88rem;
    border-radius: 100%;
  }
  .rm-name-l>div {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .15rem;
  }
  .rm-name-l>div>p {
    font-size:.2rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .rm-name-l>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .rm-name-l>div>img {
    width: .14rem;
    height: .14rem;
    margin-left: .3rem;
  }

  .rm-grys,.rm-qzqw {
    padding: .2rem 0;
    box-sizing: border-box;
    border-bottom: .01rem solid #EEEEEE;
  }
  .rm-tit {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .2rem;
  }
  .rm-tit>img {
    width: .14rem;
    height: .14rem;
  }
  .rm-tit>p {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .rm-content {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .rm-qzqw-bot {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .rm-qzqw-bot>img {
    width: .08rem;
    height: .14rem;
  }
  .rm-qzqw-bot>div>p:nth-child(1) {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    margin-bottom: .1rem;
  }
  .rm-qzqw-bot>div>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .rm-qzqw-bot2 {
    height: .35rem;
  }
  .rm-qzqw-bot2>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .rm-qzqw-bot2>div>img {
    width: .08rem;
    height: .14rem;
    margin-left: .1rem;
  }
  .rm-qzqw-bot2>div>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    margin-bottom: 0 !important;
  }
  .rm-gzjl>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height:.24rem;
  }
  >>>.van-dialog__header{
    line-height:.24rem;
    padding-top:.24rem;
  }
  >>>.van-dialog__content{
    margin: .16rem .12rem .23rem;
  }
  >>>.van-dialog{
    width: 3.2rem;
    font-size: .16rem;
    border-radius:.16rem;
  }
  .dialog{
    width: calc(100% - 0.18rem);
    height: .36rem;
    border: none;
    background: #F6F6F6;
    border-radius: .08rem;
    padding: 0 .09rem;
    font-size: .14rem;
  }
</style>
